<template>
    <div class="learning_warp">
        <!--视频-->
        <div class="study_video">
            <div class="study_title">
                <div class="title_name">
                    <h3>{{userInfo.role_id == 9 ?'您孩子学习过的视频':userInfo.role_id == 8 ?'班级学习过的视频':'我学习过的视频'}}</h3>
                </div>
            </div>
            <div class="video_warp">
                <swiper :options="swiperOption" v-if="studyVideoNewP.total>0" ref="mySwiper">
                    <swiper-slide v-for="(item, index) in studyVideoNewP.list" :key="index">
                        <div class="video_list" @click="goStudyVideo(item)">
                            <img :src="item.videoimage | pictureUrl" :title="item.title" style="height:120px" />

                            <p v-if="!item.title" class="video_name">{{item.title}}</p>
                            <p v-else-if="item.title.length < 9" class="video_name">{{item.title}}</p>
                            <p v-else class="video_name" :title="item.title">{{item.title.slice(0,8)}}...</p>
                        </div>
                    </swiper-slide>
                    <!-- <div class="swiper-pagination" slot="pagination"></div> -->
                    <div class="swiper-button-prev" slot="button-prev"></div>
                    <div class="swiper-button-next" slot="button-next"></div>
                </swiper>
            </div>
        </div>
        <!--班级错题-->
        <div class="class_mistakes" v-if="false">
            <div class="study_title">
                <div class="title_name">
                    <h3>班级错题本</h3>
                </div>
                <div class="more">
                    <span>更多 > </span>
                </div>
            </div>
            <ul class="wrong_Topic clearFix">
                <li class="topic_list">
                    <div class="topic_detail">
                        <p class="subject">赛贝尔曲线</p>
                        <p class="topicType clearFix">
                            <span>数学题：</span>
                            <span>单选题</span>
                        </p>
                    </div>
                    <span>错：30人</span>
                </li>
                <li class="topic_list">
                    <div class="topic_detail">
                        <p class="subject">赛贝尔曲线</p>
                        <p class="topicType clearFix">
                            <span>数学题：</span>
                            <span>单选题</span>
                        </p>
                    </div>
                    <span>错：30人</span>
                </li>
            </ul>
        </div>
        <!--做过试题-->
        <div class="questions">
            <div class="study_title">
                <div class="title_name">
                    <h3>{{userInfo.role_id == 9 ?'您孩子做过的试题':userInfo.role_id == 8 ?'班级做过的试题':'我做过的试题'}}</h3>
                </div>
                <div class="more">
                    <span>
                        <el-select v-model="questionsV" placeholder="请选择" size="mini" @change="questionsChange">
                            <el-option v-for="item in questionYList" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </span>
                </div>
            </div>
            <div class="questions_list">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="charts">
                            <EchartsQuestions :title="questionsV +'上半年'" :xAxisName="upperYear"
                                :metadata='questionList.slice(0,6)'></EchartsQuestions>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="charts">
                            <EchartsQuestions :title="questionsV +'下半年'" :xAxisName="lowerYear"
                                :metadata='questionList.slice(6,12)'></EchartsQuestions>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!--做的错题-->
        <div class="questions">
            <div class="study_title">
                <div class="title_name">
                    <h3>{{userInfo.role_id == 9 ?'您孩子的错题本':userInfo.role_id == 8 ?'班级的错题本':'我的错题本'}}</h3>
                </div>
                <div class="more">
                    <el-select v-model="questionsErrorV" placeholder="请选择" size="mini" @change="questionsErrorChange">
                        <el-option v-for="item in questionErrorYList" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="questions_list">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="charts">
                            <EchartsQuestions :title="questionsErrorV +'上半年'" :xAxisName="upperYear"
                                :metadata='questionErrorList.slice(0,6)'></EchartsQuestions>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="charts">
                            <EchartsQuestions :title="questionsErrorV +'下半年'" :xAxisName="lowerYear"
                                :metadata='questionErrorList.slice(6,12)'></EchartsQuestions>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!--收藏-->
        <div class="collection">
            <div class="study_title">
                <div class="title_name">
                    <h3>{{userInfo.role_id == 9 ?'您孩子的':userInfo.role_id == 8 ?'班级的':'我的'}}</h3>
                </div>
                <ul class="collectionBox">
                    <li :class="isActive == item.id?'active':''" v-for="item in Start" :key="item.id"
                        @click="handleActive(item.id)">{{item.name}}</li>
                </ul>
            </div>
            <!--学习过视频-->
            <ul v-if="isActive == 1 " class="favorites_list clearFix">
                <el-row :gutter="10">
                    <el-col :span="8" v-for="(item,index) in studyVideoP.list" :key="index">
                        <li class="list" @click="goStudyVideo(item)">
                            <div class="cover_img">
                                <el-image :src="item.videoimage | pictureUrl" fit="fill" style="height:120px">
                                    <div slot="placeholder" class="image-slot">
                                        加载中<span class="dot">...</span>
                                    </div>
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </div>
                            <div class="detail">
                                <p v-if="!item.title" class="videoName">{{item.title}}</p>
                                <p v-else-if="item.title && item.title.length < 9" class="videoName">{{item.title}}</p>
                                <p v-else class="videoName" :title="item.title">{{item.title.slice(0,8)}}...</p>
                                <p>讲师：<span>{{item.teacherName}}</span></p>
                                <p>视频大小：<span>{{(item.size/1024/1024).toString().split('.')[0]}}M</span></p>
                            </div>
                            <i class="el-icon-star-on iconStart"></i>
                        </li>
                    </el-col>
                </el-row>

            </ul>
            <!--视频收藏-->
            <ul v-if="isActive == 2" class="favorites_list clearFix">
                <el-row :gutter="10">
                    <el-col :span="8" v-for="(item,index) in collectVideoP.list" :key="index">
                        <li class="list" @click="goStudyVideo(item)">
                            <div class="cover_img">
                                <el-image :src="item.videoimage | pictureUrl" fit="fill" style="height:120px">
                                    <div slot="placeholder" class="image-slot">
                                        加载中<span class="dot">...</span>
                                    </div>
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </div>
                            <div class="detail">
                                <p v-if="!item.title" class="videoName">{{item.title}}</p>
                                <p v-else-if="item.title && item.title.length < 9" class="videoName">{{item.title}}</p>
                                <p v-else class="videoName" :title="item.title">{{item.title.slice(0,8)}}...</p>
                                <p>上传时间：<span>{{item.createTime?item.createTime.slice(0,10):item.createTime}}</span></p>
                                <p>视频大小：<span>{{(item.size/1024/1024).toString().split('.')[0]}}M</span></p>
                                <p>讲师：<span>{{item.teacherName}}</span></p>
                            </div>
                            <i class="el-icon-star-on iconStart"></i>
                        </li>
                    </el-col>
                </el-row>

            </ul>
            <!--试题-->
            <ul v-if="isActive == 3" class="tryTopic">
                <li class="tryTopic_list" v-for="(item,index) in collectQuestionP.list" :key="index">
                    <div class="tryTopic_title">
                        <span>{{item.id}}</span>
                        <!-- <span><a target="_black" :href="item.file_path_prefix">{{item.id}}</a></span> -->
                    </div>
                    <div class="tryTopic_time">
                        <el-button type="text"  @click="openDetails(item,'question_stem')">详情</el-button>
                        <el-button type="text"  @click="openDetails(item,'answer')">答案</el-button>
                        <el-button type="text"  @click="openDetails(item,'answer_parse')">答案解析</el-button>
                        <!-- <span>{{item.subject_id}}</span> -->
                    </div>
                </li>
            </ul>
            <!--错题-->
            <ul v-if="isActive == 4" class="tryTopic">
                <li class="tryTopic_list" v-for="(item,index) in collectWrongQuestionP.list" :key="index">
                    <div class="tryTopic_title">
                        <span>{{item.id}}</span>
                        <!-- <span><a target="_black" :href="item.file_path_prefix">{{item.id}}</a></span> -->
                    </div>
                    <div class="tryTopic_time">
                        <el-button type="text"  @click="openDetails(item,'question_stem')">详情</el-button>
                        <el-button type="text"  @click="openDetails(item,'answer')">答案</el-button>
                        <el-button type="text"  @click="openDetails(item,'answer_parse')">答案解析</el-button>
                        <!-- <span>{{item.subject_id}}</span> -->
                    </div>
                </li>
            </ul>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[9, 15, 21, 42]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="详情" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
            <span v-html="questionCache.showDetails"></span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false" size="mini">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import StudyTitle from '@c/LearningSpace/studyTitle';
    import EchartsQuestions from '@c/echarts/lineEcharts/questionsEchartLine'
    import {
        mapState
    } from "vuex";
    export default {
        components: {
            StudyTitle,
            EchartsQuestions
        },
        computed: {
            ...mapState({
                // 用户详细信息
                userInfo: state => state.userModule.otherUserInfo,
            }),
        },
        created() {
            this.getStudyVideo()
            this.getQuestionsDone()
            this.getWrongQuestion()
            this.getCollectVideo()
            this.getNewStudyVideo()
            // this.getCollectQuestion()
        },
        watch:{
            isActive(val){
                this.handleCurrentChange(1)
                this.handleCurrentChange(1)
                this.handleCurrentChange(1)
            }
        },
        data() {
            return {
                questionCache: {},
                dialogVisible: false,
                currentPage: 1,
                total: 0,
                pageSize: 9,
                collectQuestionP: [],
                collectWrongQuestionP: [],
                collectVideoP: [],
                studyVideoNewP: [],
                studyVideoP: [],
                questionsErrorV: (new Date).getFullYear(),
                questionsV: (new Date).getFullYear(),
                questionYList: [(new Date).getFullYear()],
                questionErrorYList: [(new Date).getFullYear()],
                questionList: [],
                questionErrorList: [],
                yearsP: (new Date).getFullYear(),
                upperYear: ['一月', '二月', '三月', '四月', '五月', '六月'],
                lowerYear: ['七月', '八月', '九月', '十月', '十一月', '十二月'],
                swiperOption: {
                    loop: false,
                    autoplay: false,
                    slidesPerView: 5,
                    spaceBetween: 30,
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    on: {
                        tap: function (e, params) {
                        }
                    }
                },
                Start: [{
                    id: 1,
                    name: "学过的视频"
                }, {
                    id: 2,
                    name: "收藏的视频"
                }, {
                    id: 3,
                    name: "收藏的试题"
                }, {
                    id: 4,
                    name: "错题本"
                }],
                isActive: 1
            }
        },
        methods: {
            handleClose(){
                this.dialogVisible = false
            },
            openDetails(params,type){
                this.dialogVisible = true
                if(type == 'question_stem'){
                    this.questionCache.showDetails = params.question_stem
                }else if(type == 'answer'){
                    this.questionCache.showDetails = params.answer
                }else if(type == 'answer_parse'){
                    this.questionCache.showDetails = params.answer_parse
                }
            },
            handleSizeChange(val) {
                this.pageSize = val
                if (this.isActive == 1) {
                    this.getStudyVideo()
                } else if (this.isActive == 2) {
                    this.getCollectVideo()
                } else if (this.isActive == 3) {
                    this.getCollectQuestion()
                }else if (this.isActive == 4) {
                    this.getcollectWrongQuestion()
                }
            },
            handleCurrentChange(val) {
                // console.log(this.isActive,'1')
                this.currentPage = val
                if (this.isActive == 1) {
                    this.getStudyVideo()
                } else if (this.isActive == 2) {
                    this.getCollectVideo()
                } else if (this.isActive == 3) {
                    this.getCollectQuestion()
                }else if (this.isActive == 4) {
                    this.getcollectWrongQuestion()
                }
            },
            goStudyVideo(params) {
                var alink = document.createElement("a");
                alink.target = "_Blank";
                alink.href = 'http://111.22.209.108:33444/VideoClass_web/before/video_details.html?id=' + params.id;
                // alink.download = params.path; //图片名
                alink.click();
                // window.location.href = pictureUrl(params.path)
            },
            getStudyVideo() {
                this.$store.dispatch('homeModule/studyVideo', {
                    limit: this.pageSize,
                    page: this.currentPage
                }).then(res => {
                    if (res) {
                        this.total = res.total
                        this.studyVideoP = res
                    }
                })
            },
            getNewStudyVideo() {
                this.$store.dispatch('homeModule/studyVideo', {
                    limit: 20,
                    page: 1
                }).then(res => {
                    if (res) {
                        this.studyVideoNewP = res
                    }
                })
            },
            getCollectQuestion() {
                this.$store.dispatch('homeModule/collectQuestion', {
                    limit: this.pageSize,
                    page: this.currentPage
                }).then(res => {
                    if (res) {
                        // this.total = res.total
                        this.collectQuestionP = res
                        this.total = res.total
                    }
                })
            },
            getcollectWrongQuestion() {
                this.$store.dispatch('homeModule/collectWrongQuestion', {
                    limit: this.pageSize,
                    page: this.currentPage
                }).then(res => {
                    if (res) {
                        // this.total = res.total
                        this.collectWrongQuestionP = res
                        this.total = res.total
                    }
                })
            },
            getCollectVideo() {
                this.$store.dispatch('homeModule/collectVideo', {
                    limit: this.pageSize,
                    page: this.currentPage
                }).then(res => {
                    if (res) {
                        // this.total = res.total
                        this.collectVideoP = res
                        if (this.collectVideoP.list) {
                            this.collectVideoP.list = this.collectVideoP.list.filter(item => item != null)
                            this.total = this.collectVideoP.total
                        }
                    }
                })
            },
            questionsChange(val) {
                this.getQuestionsDone(this.questionsV)
            },
            questionsErrorChange(val) {
                this.getWrongQuestion(this.questionsErrorV)
            },
            getWrongQuestion(params) {
                this.$store.dispatch('homeModule/getWrongQuestion', {
                    userId: this.userInfo.id,
                    years: params ? params : this.yearsP.toString()
                }).then(res => {
                    if (res) {
                        var count = Number(this.yearsP) - Number(res.list[0][0][0].minTime.slice(0, 4))
                        if (count > 0 && !params) {
                            for (var yr = 1; yr <= 1; yr++) {
                                this.questionErrorYList.push(Number(this.yearsP) - yr)
                            }
                        }
                        this.questionErrorList = res.list[1]
                    }
                })
            },
            getQuestionsDone(params) {
                this.$store.dispatch('homeModule/getQuestionsDone', {
                    userId: this.userInfo.id,
                    years: params ? params : this.yearsP.toString() || null
                }).then(res => {
                    if (res) {
                        var count = Number(this.yearsP) - Number(res.list[0][0].minTime.slice(0, 4))
                        if (count > 0 && !params) {
                            for (var yr = 1; yr <= 1; yr++) {
                                this.questionYList.push(Number(this.yearsP) - yr)
                            }
                        }
                        this.questionList = res.list[1]

                    }
                })
            },
            getCollectArticles() {

            },
            handleActive(id) {
                this.isActive = id
                if (this.isActive == 1) {
                    this.getStudyVideo()
                } else if (this.isActive == 2) {
                    this.getCollectVideo()
                } else if (this.isActive == 3) {
                    this.getCollectQuestion()
                } else if (this.isActive == 4) {
                    this.getcollectWrongQuestion()
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .learning_warp {
        box-sizing: border-box;
        padding: 5px;
        background-color: white;

        .study_video {
            width: 100%;

            .video_warp {
                width: 100%;
                height: 180px;
                margin: 10px 0;
            }
        }

        .questions {
            width: 100%;
            margin-top: 15px;

            .questions_list {
                margin: 10px 0;

                .charts {
                    width: 100%;
                    height: 400px;
                }
            }
        }

        .collection {
            width: 100%;
            margin-top: 15px;

            .favorites_list {
                box-sizing: border-box;
                padding-left: 8px;
                list-style-type: none;
                margin-block-start: 15px;
                margin-block-end: 15px;

                li {
                    cursor: pointer;
                    width: 100%;
                    margin-right: 6px;
                    margin-bottom: 10px;
                    float: left;
                    box-sizing: border-box;
                    padding: 15px 10px;
                    background-color: #f5f7fa;
                    position: relative;

                    .cover_img {
                        width: 120px;
                        height: 120px;
                        float: left;
                    }

                    .detail {
                        float: left;
                        margin-left: 15px;

                        p {
                            margin-block-start: 0;
                            margin-block-end: 0;
                            color: #303133;
                            text-align: left;
                        }

                        .videoName {
                            width: 100%;
                            font-size: 18px;
                            font-weight: bold;
                            color: #409EFF;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        p:not(:first-of-type) {
                            margin-top: 12px;
                            font-size: 14px;
                        }
                    }

                    .iconStart {
                        position: absolute;
                        top: 0;
                        right: 0;
                        font-size: 22px;
                        color: #409EFF;
                    }
                }
            }

            .tryTopic {
                box-sizing: border-box;
                padding-left: 8px;
                list-style-type: none;
                margin-block-start: 10px;
                margin-block-end: 10px;

                .tryTopic_list {
                    cursor: pointer;
                    box-sizing: border-box;
                    padding: 8px 5px;
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    color: #303133;
                }
            }
        }

        .wrong_Topic {
            box-sizing: border-box;
            padding-left: 8px;
            list-style-type: none;
            margin-block-start: 10px;
            margin-block-end: 10px;

            .topic_list {
                float: left;
                margin-right: 15px;
                text-align: left;
                font-size: 12px;

                .topic_detail {
                    box-sizing: border-box;
                    padding: 4px 0;
                    background-color: #f5f7fa;

                    p {
                        box-sizing: border-box;
                        padding: 10px 15px;
                        margin-block-start: 0;
                        margin-block-end: 0;
                    }

                    .subject {
                        width: 160px;
                        text-align: center;
                        font-size: 16px;
                        border-bottom: 1px solid #ccc;
                    }

                    .topicType {
                        text-align: justify;
                    }

                    .topicType>span:last-of-type {
                        float: right;
                    }
                }
            }
        }

        .video_list {
            width: 100%;
            height: 180px;
            position: relative;
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
            }

            .video_name {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                color: #409EFF;
                box-sizing: border-box;
                padding: 10px 0;
                background-color: rgba(255, 255, 255, .9);
                margin-block-start: 0;
                margin-block-end: 0;
            }
        }

        .study_title {
            box-sizing: border-box;
            padding: 8px 0;
            margin: 0 auto;
            background-color: white;
            border-bottom: 1px solid #ccc;
        }

        .title_name {
            float: left;

            h3 {
                font-size: 18px;
                margin-block-start: 0;
                margin-block-end: 0;
                padding-left: 8px;
                border-left: 2px solid #409EFF;
            }
        }

        .collectionBox {
            float: left;
            list-style-type: none;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;
            margin-top: 4px;

            li {
                float: left;
                margin-left: 35px;
                cursor: pointer;
                color: #303133;
                font-size: 15px;
            }

            li.active {
                color: #409EFF;
            }
        }

        .more {
            .el-select {
                width: 80px;
            }

            float: right;
            cursor: pointer;
            color: #909399;
            font-size: 14px;
            margin-top: 4px;
        }
    }

    .study_title::after,
    .clearFix::after {
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
</style>